<template>
  <div>
    <h1>{{ person.name }}</h1>
    <h1>{{ person.age }}</h1>
    <h1>职业: {{ person.type }}</h1>
    <h1>薪资: {{ person.salary}}</h1>
    <h1>job中c值为: {{ person.a.b.c }}</h1>
    <h1>爱好: {{  person.love }}</h1>
    <button @click="change">响应式修改</button>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
  
    let person = reactive({
      name:"张三",
      age: 25,
      type: "前端工程师",
      salary: "6K",
      a:{
        b:{
          c: 66666
        }
      },
      love: ['抽烟', '喝酒', '打牌']
    })
   
    function change() {
      person.name = "李四";
      person.age += 1;
      person.type = "UI工程师";
      person.salary = "10k";
      person.a.b.c = 99999;
      person.love[0] = '学习';
    }

    return {
      person,
      change
    };
  }
};
</script>
